<template>
  <div>
    <PageTable :loading="loading" :columns="columns" :data="dataSource" />
    <Pagination
      v-show="total > 0"
      :total="total"
      :pageNo.sync="listQuery.pageNo"
      :pageSize.sync="listQuery.pageSize"
      @pagination="getPlaceList"
    />
  </div>
</template>

<script>
export default {
  name: 'AdvertPlace',
  data() {
    return {
      loading: true,
      total: 0,
      listQuery: {
        pageNo: 1,
        pageSize: 10
      },
      columns: [
        {
          label: '位置名称',
          prop: 'placeName'
        },
        {
          label: '尺寸',
          prop: 'placeSize'
        },
        {
          label: '是否启用',
          render: (h, { row }) => {
            return (
              <span style={row.isShow ? 'color: "#409eff"' : ''}>
                {row.isShow ? '启用' : '未启用'}
              </span>
            )
          }
        },
        {
          label: '操作',
          render: (h, { row }) => {
            return (
              <div>
                <el-switch
                  value={row.isShow}
                  active-text="开启"
                  inactive-text="关闭"
                  onChange={() => this.updateShow(row)}
                />
              </div>
            )
          }
        }
      ],
      dataSource: []
    }
  },
  created() {
    this.getPlaceList()
  },
  methods: {
    // 获取列表
    async getPlaceList() {
      const params = {
        ...this.listQuery
      }
      const {
        data: { records, total }
      } = await this.$http.advert.placeApi.getPlaceList({ params })
      this.dataSource = records
      this.total = total
      this.loading = false
    },
    // 更新是否显示
    async updateShow({ id, isShow }) {
      const { status } = await this.$http.advert.placeApi.updateShow({
        sort: 0,
        id,
        isShow: !isShow
      })
      if (status === 200) {
        this.$message.success(`${isShow ? '已关闭' : '已开启'}`)
        this.getPlaceList()
      }
    }
  }
}
</script>
